<template>
    <div class="home">
      <ul class="list1" @click="jump">
        <li v-for="item in homes" :key="item">
          <div class="img">
            <img src="item.image" />
          </div>
          <b>{{ item.title }}</b>
          <p>乐人：<i>{{ item.name }}</i>阅读量：<b>{{ item.number }}</b></p>
        </li>
      </ul>
    </div>
</template>

<script>
import { gethomes } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      homes: []
    }
  },
  methods: {
    jump () {
      this.$router.push('/musicstory/')
    }
  },
  created () {
    gethomes()
      .then(res => {
        this.homes = res.list
        // console.log(res.list)
      })
      .catch(err => console.log('异常：', err))
  }
}
</script>

<style lang="scss" scoped>
.list1{
  list-style: none;
  li{
    width: 302px;
    margin: 0 auto;
    .img{
    width: 300px;
    border: 1px solid red;
    height: 175px;
    background-color: grey;
  }
  i{
    font-style: normal;
    padding-right: 20px;
  }
  b{
    font-weight: normal;
  }
  }
}
</style>
